<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #app {
            margin: 50px auto;
            width: 600px;
        }

        fieldset {
            border: 1px solid orangered;
            margin-bottom: 20px;
        }

        fieldset input {
            width: 200px;
            height: 30px;
            margin: 10px 0;
        }

        table {
            width: 600px;
            border: 2px solid orangered;
            text-align: center;
        }

        thead {
            background: orangered;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 第一部分 -->
    <fieldset>
        <legend>贝贝学生录入系统</legend>
        <div>
            <span>姓名:</span>
            <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
        </div>
        <div>
            <span>年龄:</span>
            <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
        </div>
        <div>
            <span>性别:</span>
            <select v-model="newStudent.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <span>手机号:</span>
            <input type="text" placeholder="请输入手机号" v-model="newStudent.phone">
        </div>
        <!-- v-on  @ -->
        <button @click="createNewStudent()">创建新用户</button>
    </fieldset>

    <!-- 第二部分 -->
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机号</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p,index) in persons">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
            <td>{{p.phone}}</td>
            <td>
                <button @click="deleteStudentMsg(index)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            persons: [
                {name: '张三', age: 18, sex: '男', phone: '12345'},
                {name: '李四', age: 20, sex: '男', phone: '12345'},
                {name: '王五', age: 23, sex: '女', phone: '12345'},
                {name: '赵6', age: 30, sex: '男', phone: '12345'}
            ],
            newStudent: {name: '', age: 0, sex: '男', phone: ''},
        },
        methods: {
            // 创建一条新记录
            createNewStudent() {
                // 姓名不能为空
                if (this.newStudent.name === '') {
                    alert('姓名不能为空！');
                    return;
                }
                // 年龄不能小于0
                if (this.newStudent.age <= 0) {
                    alert('请输入正确的年龄！');
                    return;
                }
                // 手机号不能为空
                if (this.newStudent.phone === '') {
                    alert('手机号不能为空！');
                    return;
                }

                // 往数据库添加一条新元素
                this.persons.unshift(this.newStudent);
                // 清空数据
                this.newStudent = {name: '', age: 0, sex: '男', phone: ''};
            },

            // 删除一条学生记录
            deleteStudentMsg(index) {
                this.persons.splice(index, 1)
            }
        }
    });
</script>
</body>
</html>